<template>
    <div>
        <!-- 顶部交互模块 -->
        <div class="paste" @paste="pasteMe">
            <!-- 文字检索 -->
            <div class="textIn">
                <div class="hint1">
                    <div class="hightLight">文字检索</div>
                    <div class="hint2">Ctrl+V粘贴剪切板的文字，或选择查询的文字</div>
                </div>
                <div class="jh">
                    <div>请输入：</div>
                    <input type="text" v-model="userInput.querytext" class="myinput">
                    <div class="mycheckbox">
                        <el-checkbox-group v-model="userInput.searchitems" :min="0" :max="4">
                            <el-checkbox v-for="(item, index) in typeList" :label="item" :key="index">{{ item
                            }}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="mycheckbox2">
                        <el-checkbox-group v-model="userInput.exactMatch" :min="0">
                            <el-checkbox>精确查询</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <button @click="search">查询</button>
            </div>
            <!-- 上传文件检索 -->
            <div class="fileIn">
                <div class="hint3">
                    <div class="hint_text">
                        <div class="hightLight2">图像检索</div>
                        <div class="hint4">点击此处后，Ctrl+V粘贴图像立刻查询</div>
                    </div>

                    <div class="canvas">
                        <!-- <el-button icon="el-icon-d-arrow-right" size="mini" @click="dialogVisible = true">详情</el-button> -->
                        <myCanvas @change="getCanvas($event)"></myCanvas>
                    </div>
                </div>
                <div class="myupload">
                    <el-upload class="upload-demo" :http-request="httpRequest" drag action="#" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="mytext">点击上传或者拖到此处上传</div>
                        <!-- <div class="mytext">拖到此处上传</div> -->
                    </el-upload>
                </div>
            </div>
        </div>
        <!-- 下面主体部分 -->
        <!-- 内容 -->
        <div class="publishcontent">
            <el-card class="box-card" shadow="hover" v-for="(item, index) in publish" :key="index">
                <div slot="header" class="clearfix">
                    <span class="itemName">{{ item.hanzi }}</span>
                </div>
                <!-- mock暂时图片 -->
                <!-- <img src="@/assets/text.jpg"> -->
                <!-- 真实请求的图片 -->
                <img :src="'http://gyt2bs.natappfree.cc/' + 'media/MarkerPIC/' + item.ID + '.jpg'" alt="">
                <div class="title_inBtn">
                    <div class="title">{{ item.FText }}</div>
                    <div class="inBtn">
                        <myDialog :detail="item"></myDialog>
                        <!-- <el-button icon="el-icon-d-arrow-right" size="mini" @click="isShow = true">详情</el-button> -->
                    </div>

                </div>

            </el-card>
        </div>
    </div>
</template>

<script>
import myDialog from "@/components/myDialog"
import myCanvas from "@/components/myCanvas"

export default {
    name: 'searchDetail',
    data() {
        return {
            userInput: {
                // 用户input框输入
                querytext: '',
                // 用户勾选的Type数组
                searchitems: [],
                // 用户是否精确查询
                exactMatch: false,
                // 用户上传图片的base64编码
                Word: '',
            },
            // 图片地址
            imageUrl: '',
            // 存放所有的type
            typeList: ['汉译', '标音', '编号', '字释'],
            // 存放获取的数据
            publish: [],
        }
    },
    components: {
        myDialog,
        myCanvas
    },
    methods: {
        // 用户上传的file就在data里面
        // 修改默认的上传行为，可以自定义上传的数据
        // 将图片转为base64格式存入this.fileBase64中
        httpRequest(data) {
            // console.log('DATA', data)
            this.imageUrl = URL.createObjectURL(data.file);
            //限制上传文件类型 
            const isPFX = data.file.type === 'image/jpeg' || data.file.type === 'image/jpg' || data.file.type ===
                'image/png'
            const isLt2M = data.file.size / 1024 / 1024 < 2
            if (!isPFX) {
                this.$message.error("上传头像图片只能是 JPG、PNG、JPEG 格式!")
            } else if (!isLt2M) {
                this.$message.error("上传文件大小不能超过 2MB!")
            } else {
                this.getBase64(data.file).then(resBase64 => {
                    this.userInput.Word = resBase64.split(',')[1] //直接拿到base64信息
                    this.tempUrl = resBase64.split(',')[1]
                    // console.log(this.Word,this.userInput.Word,this.userInput)
                    this.getSearchData()
                })
            }
        },
        //这个file参数 就是文件信息
        getBase64(file) {
            // console.log("FILE2222", file)
            // 返回一个Promise对象
            return new Promise((resolve, reject) => {
                let reader = new FileReader()
                let fileResult = ""
                // 将file转为base64
                reader.readAsDataURL(file)
                //处理 load 事件。该事件在读取操作完成时触发。
                reader.onload = function () {
                    fileResult = reader.result;
                }
                // 该事件在读取操作发生错误时触发。
                //转失败就抛出错误
                reader.onerror = function (error) {
                    reject(error)
                }
                // 该事件在读取操作结束时（要么成功，要么失败）触发。
                //转成功就 resolve 出去
                reader.onloadend = function () {
                    resolve(fileResult)
                }
            })
        },
        // 获取moke的数据
        async getData() {
            const res = await this.$http.get('http://localhost:3000/test')
            this.publish = res.data
            console.log(this.publish)
        },
        // 获取搜索的结果
        async getSearchData() {
            // console.log('发送请求了', JSON.stringify(this.userInput))
            const res = await this.$http.post('api/retrieval', JSON.stringify(this.userInput))
            console.log(res)
            this.publish = res.data
            console.log(this.publish)
        },
        // 实现粘贴图片上传和文字上传
        pasteMe(event) {
            // 获取items
            const items = (event.clipboardData || window.clipboardData).items
            console.log(items[0].type)
            // 如果是图片
            if (items[0].type.indexOf("image") !== -1) {
                // 获取剪切板的图片
                let file = items[0].getAsFile()
                // 此时file就是我们的剪切板中的图片对象
                this.getBase64(file).then(res => {
                    this.userInput.Word = res.split(',')[1] //直接拿到base64信息
                    // console.log(this.Word,this,this.userInput.Word)
                    this.getSearchData()
                })
            } else {
                // 获取剪切板的文字
                var clipPromise = navigator.clipboard.readText()
                clipPromise.then(clipText => {
                    // alert(clipText);
                    // console.log(clipText)
                    this.userInput.querytext = clipText
                })
            }
        },
        // 用户点击查询
        search() {
            console.log(this.userInput, JSON.stringify(this.userInput))
            this.getSearchData()
        },
        // 获得canvas组件传过来的图片
        getCanvas(e){
            console.log('111',e)
            this.userInput.Word = e
            this.getSearchData()
        }
    },
    mounted() {
        // this.getData()
        // this.getSearchData()
    }
}
</script>

<style lang="scss" >
.paste {
    // background-color: #999;
    height: 100px;
    display: flex;
    border-bottom: 1px solid #999;
    margin-bottom: 5px;

    .textIn {
        display: flex;
        flex-direction: column;
        width: 45%;
        margin-left: 10px;

        .hint1 {
            margin: 0 0 10px 0;
            display: flex;
            // background: skyblue;

            .hightLight {
                // line-height: 100px;
                color: red;
                font-size: 20px;
                font-weight: 600;
            }

            .hint2 {
                font-size: 18px;
                font-weight: 400;
                // color: pink;
                margin-left: 20px;
            }

        }

        .jh {
            // background-color: pink;
            display: flex;

            // width: 100px;
            .myinput {
                width: 80px;
                margin-right: 10px;
            }

            .mycheckbox2 {
                margin-left: 10px;
            }

        }

        button {
            margin-left: 450px;
            margin-top: 5px;
            width: 100px;
            height: 35px;
        }
    }

    .fileIn {
        display: flex;

        // flex-direction: column;
        .hint3 {
            display: flex;
            flex-direction: column;
            margin: 0 0 0 40px;

            .hint_text {
                display: flex;

                .hightLight2 {
                    color: red;
                    font-size: 20px;
                    font-weight: 600;
                }

                .hint4 {
                    font-size: 18px;
                    font-weight: 400;
                    margin-left: 20px;

                }
            }

            // 画布部分
        .canvas {
            // height: 40px;
            margin-top: 20px;
        }

        }


        .myupload {
            margin: 0 0 0 20px;

            .el-upload {
                .el-upload-dragger {
                    width: 200px;
                    height: 100px;

                    .el-icon-upload {
                        margin: 10px 0 16px;
                        width: 100px;
                        height: 10px;
                    }
                }
            }
        }
    }
}

.publishcontent {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    // height: 1000px;

    .box-card {
        height: 250px;
        // background-color: pink;
        width: 240px;
        margin: 10px 15px;

        .clearfix {
            .itemName {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
        }

        img {
            width: 100px;
            height: 100px;
        }

        .title_inBtn {
            display: flex;
            flex-direction: column;

            .title {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            .inBtn {
                width: 30px;
                height: 50px;
                margin: 20px 0 0 147px;
                // background-color: red;
                border-radius: 5px;
            }
        }

    }

}
</style>